<template>
  <div class="mes-datacollectforresource-fai-dialog">
    <el-tabs v-model="mesActiveName">
      <el-tab-pane label="业务参数" name="base">
        <el-form
            :model="Machine"
            class="demo-form-inline"
            size="small"
            label-width="100px"
            label-position="left"
        >
          <el-form-item label="MES配置标签项" width="120px">
            <data-source-input
                @change="onMesConfigSectionChange"
                :datasource-item="Machine.MesConfigSection"
                :node-id="Machine.MesConfigSection.DataSourceId"
                :param-name="Machine.MesConfigSection.ParamName"
                placeholder="请选择MES配置标签项"
                style="width: 400px;margin-left: 6px"
            />
          </el-form-item>
          <el-form-item label="SFC" width="120px">
            <data-source-input
                @change="onSFCChange"
                :node-id="Machine.SFCDataSourceId"
                :param-name="Machine.SFC"
                placeholder="请选择SFC"
                style="width: 400px;margin-left: 6px"
            />
          </el-form-item>
          <el-form-item label="收数">
            <div class="coll-data-item">
              <div
                  class="mes-request"
                  v-for="(RequestParam, RequestParamIndex) in Machine.RequestParams"
                  :key="RequestParam.key"
              >
                <el-tag type="primary" style="margin-right: 6px">{{ RequestParamIndex + 1 }}</el-tag>
                <el-input
                    class="request-item"
                    v-model="Machine.RequestParams[RequestParamIndex].Name"
                    @input="forceUpdate"
                    placeholder="收数Name"
                >
                </el-input>
                <data-source-input
                    class="request-item"
                    style="width: 300px;margin-left: 6px"
                    @change="onParamNameChange($event,Machine.RequestParams[RequestParamIndex])"
                    :node-id="Machine.RequestParams[RequestParamIndex].DataSourceId"
                    :param-name="Machine.RequestParams[RequestParamIndex].ParamName"
                    placeholder="请选择Value"
                />
                <el-select
                    class="request-item"
                    v-model="Machine.RequestParams[RequestParamIndex].DataType"
                    @change="forceUpdate"
                    placeholder="收数Type"
                >
                  <el-option
                      v-for="item in MesDataType"
                      :key="item"
                      :label="item"
                      :value="item"
                  >
                  </el-option>
                </el-select>
                <el-button
                    icon="Delete"
                    @click.prevent="deleteRequestParam(RequestParamIndex)"
                    type="warning"
                    circle
                ></el-button>
                <el-button
                    icon="Plus"
                    @click.prevent="addRequestParam"
                    type="success"
                    v-if="Machine.RequestParams.length-1===RequestParamIndex"
                    circle
                ></el-button>
              </div>
            </div>
          </el-form-item>
          <el-form-item label="描述">
            <el-input
                v-model="Machine.Desc"
                type="textarea"
                :rows="3"
                placeholder="描述"
                style="width: 90%"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <el-tab-pane label="基础参数" name="requestParams">
        <base-params-form></base-params-form>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>

import BaseParamsForm from './BaseParamsForm.vue'

import FlowNodeDataApi from '@/api/flow/FlowNodeDataApi'
import Utils from '../../../../utils/Common'
import { AppParams } from '@/utils/appParams'
import NodeConfigMixin from '../../../../libs/NodeConfigMixin'
import DataSourceInput from '../../components/NodeInputSourceDataComponent.vue'
import { MessageWarning } from "@/utils";

export default {
  mixins: [NodeConfigMixin],
  name: 'DataCollectForResourceFAIDialog',
  components: {
    BaseParamsForm, DataSourceInput
  },
  data () {
    return {
      mesActiveName: 'base',
      MesDataType: AppParams.COMMON.MES_DATA_TYPE,
      optionAddress: [],
      nodeInputParams: [],
      Machine: {
        SFC: '',
        SFCDataSource: '',
        SFCDataSourceId: null,
        Desc: '',
        MesConfigSection: {
          DataSource: 'NULL',
          DataSourceId: '0',
          ParamName: '',
        },
        RequestParams: [
          {
            Name: null,
            ParamName: '',
            DataType: '',
            DataSource: '0',
            DataSourceId: null
          }
        ]
      }
    }
  },
  methods: {
    ShowNodeData () {
      const _node = this.currentClickNodeMixin
      const target = Utils.traverse(_node, [])
      this.nodeInputParams = target
      this.SetFormValue(_node)
    },
    /**
     * 表单回显功能
     * @param _node
     * @constructor
     */
    SetFormValue (_node) {
      const _NodeMes = _node?.nodeInputParam?.NodeMes
      if (!Utils.IsEmpty(_NodeMes)) {
        const from = {}
        if (_NodeMes?.MesConfigSection) {
          const MesConfigSection = _NodeMes.MesConfigSection
          from.MesConfigSection = MesConfigSection
        }
        if (!Utils.IsEmpty(_NodeMes.DataSources)) {
          const DataSources = _NodeMes.DataSources
          for (const DataSource of DataSources) {
            if (DataSource.TargetParamName === AppParams.PARAM_NAME.SFC) {
              from.SFC = DataSource.ParamName
              from.SFCDataSource = DataSource.DataSource
              from.SFCDataSourceId = DataSource.DataSourceId
            }
          }
        }
        if (!Utils.IsEmpty(_NodeMes?.DataCollection?.nodeMesDataCollectionItems)) {
          const nodeMesDataCollectionItems = _NodeMes.DataCollection.nodeMesDataCollectionItems
          const RequestParams = []
          let s = 1
          for (const dc of nodeMesDataCollectionItems) {
            dc.Name = dc.ParamData?.Name
            dc.DataType = dc.ParamData?.DataType
            dc.key = dc.DataSourceId + '_' + dc.ParamName + s
            RequestParams.push(dc)
            ++s
          }
          from.RequestParams = RequestParams
        }
        from.Desc = _node.nodeInputParam.Desc
        this.Machine = from
      }
    },
    /**
     * 添加入参
     * @param item
     * @param RequestParamIndex
     */
    addRequestParam () {
      this.Machine.RequestParams.push(
          {
            Name: null,
            ParamName: null,
            DataType: null,
            DataSource: null,
            DataSourceId: null
          })
    },
    /**
     * 删除入参
     * @param item
     * @param RequestParamIndex
     */
    deleteRequestParam (RequestParamIndex) {
      this.Machine.RequestParams.splice(RequestParamIndex, 1)
    },
    /**
     * 选中的值
     * @param item
     */
    onSFCChange (dt) {
      if (!Utils.IsEmpty(dt)) {
        this.Machine.SFCDataSourceId = dt.nodeId
        this.Machine.SFC = dt.ParamName
        this.Machine.SFCDataSource = dt.DataSource
      }
    },
    onMesConfigSectionChange (Section) {
      if (Section) {
        if (Utils.IsEmpty(this.Machine.MesConfigSection)) {
          this.Machine.MesConfigSection = {
            DataSource: '',
            DataSourceId: '',
            ParamName: '',
          }
        }
        this.Machine.MesConfigSection.DataSourceId = Section.nodeId
        this.Machine.MesConfigSection.ParamName = Section.ParamName
        this.Machine.MesConfigSection.DataSource = Section.DataSource
      }
    },
    forceUpdate () {
      this.$forceUpdate()
    },
    onParamNameChange (item, RequestParam) {
      if (!Utils.IsEmpty(item.ParamName)) {
        RequestParam.ParamName = item.ParamName
        RequestParam.DataSource = item.DataSource
        RequestParam.DataSourceId = item.nodeId
      }
    },
    /**
     * 保存节点数据
     */
    _SaveNode (NodeName) {
      const _mes = this.Machine
      let verification = true
      _mes.RequestParams?.forEach((i) => {
        if (verification && (Utils.IsEmpty(i.DataType) || Utils.IsEmpty(i.DataSourceId))) {
          verification = false
        }
        i.ParamData = {
          Name: i.Name,
          DataType: i.DataType
        }
      })
      if (!verification) {
        return MessageWarning('数据来源或数据类型不能为空')
      }
      const params = {
        NodeMes: {
          MesConfigSection: _mes.MesConfigSection,
          DataSources: [{
            DataSource: _mes.SFCDataSource,
            DataSourceId: _mes.SFCDataSourceId,
            ParamName: _mes.SFC,
            TargetParamName: AppParams.PARAM_NAME.SFC
          }],
          DataCollection: {
            nodeMesDataCollectionItems: _mes.RequestParams
          }
        },
        Desc: _mes.Desc
      }
      new FlowNodeDataApi().Install(this.currentClickNodeMixin.id, params, NodeName)
    }
  },
  mounted () {
    this.ShowNodeData()
  }
}
</script>

<style lang="less">
.mes-datacollectforresource-fai-dialog {

  .coll-data-item {
    overflow-y: auto;
    height: calc(100vh - 400px);
  }

  .mes-request {
    display: flex;
    padding: 3px 0;
    align-items: center;

    .request-item {
      padding-right: 10px;
      width: 28%
    }
  }

  .el-dialog__body {
    padding-top: 0;
  }

  .el-dialog__header {
    background-color: #545c64;
    padding: 20px 10px;

    .el-dialog__title {
      color: #ffffff;
    }
  }
}
</style>
